<template>
  <div class="home">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <h2>欢迎使用 AI 聊天助手</h2>
        </div>
      </template>
      <div class="card-content">
        <div class="features">
          <div class="feature-item">
            <el-icon :size="32" color="#409EFF"><ChatDotRound /></el-icon>
            <h3>智能对话</h3>
            <p>基于先进的 AI 技术，提供流畅自然的对话体验</p>
          </div>
          <div class="feature-item">
            <el-icon :size="32" color="#67C23A"><Connection /></el-icon>
            <h3>实时响应</h3>
            <p>快速响应用户输入，提供即时反馈</p>
          </div>
          <div class="feature-item">
            <el-icon :size="32" color="#E6A23C"><Lock /></el-icon>
            <h3>安全可靠</h3>
            <p>保护用户隐私，确保数据安全</p>
          </div>
        </div>
        <el-button type="primary" size="large" @click="$router.push('/chat')">
          <el-icon><ChatDotRound /></el-icon>
          开始聊天
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ChatDotRound, Connection, Lock } from '@element-plus/icons-vue'
</script>

<style scoped>
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.welcome-card {
  width: 100%;
  max-width: 800px;
  margin: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #303133;
}

.card-content {
  text-align: center;
  padding: 40px 0;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.feature-item {
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item h3 {
  margin: 15px 0 10px;
  color: #303133;
  font-size: 1.2rem;
}

.feature-item p {
  margin: 0;
  color: #606266;
  font-size: 0.9rem;
  line-height: 1.5;
}

.el-button {
  padding: 12px 30px;
  font-size: 1.1rem;
}

.el-button .el-icon {
  margin-right: 8px;
}
</style> 